<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>获奖区</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
    <link rel="stylesheet" type="text/css" href=" https://at.alicdn.com/t/font_474420_2hkgctv5pzni2j4i.css">
	<style type="text/css">
	    body{background: #fff;padding-bottom: 1rem;}
		.tuijian_title{height: .6rem;color: #666666;font-size: .28rem;text-indent: .25rem;line-height: .6rem;background: #f4f4f4;}
		.recommend_list>li{padding: .55rem .24rem .5rem .24rem;overflow: hidden;position: relative;}
		.recommend_list_left{float: left;width: 4.5rem;}
		.recommend_list_right{float: left;width: 2.44rem;height: 1.6rem;border-radius: .1rem;}
		.recommend_list_right img{width: 2.44rem;height: 1.6rem;border-radius: .1rem;}
		.recommend_list_title{font-size: .32rem;color: #333333;overflow: hidden;
			width: 4rem;
		     text-overflow: ellipsis;
		     display: -webkit-box;
		     -webkit-line-clamp: 2;
		     -webkit-box-orient: vertical;}
		.recommend_list_tag img{width: .34rem;vertical-align: middle;margin-right: .1rem;position: relative;top: -0.05rem;}
		.recommend_list_tag{font-size: .26rem;color: #999999;position: absolute;bottom: .5rem;left: .24rem;
			width: 4rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: .4rem;line-height: .4rem;}
        .open_prize{width: 1.37rem;position: fixed;right: 0;bottom: 2.9rem;z-index: 50;}
		
		.prize_list{width: 5.58rem;height: 8rem;background: #f45676;border-radius: .2rem;position: absolute;top:2rem;left: 50%;margin-left: -2.79rem;z-index: 100;}
		.prize_list_title{height: 1.18rem;background: url(img/p_54.png) no-repeat;width: 100%;background-size:  100% 100%;line-height: 1.18rem;color: #fff;font-size: .36rem;text-align: center;position: relative;width:100%;}
		.gift_img{width: 2.43rem !important;position: absolute;left: -.67rem;bottom:0;}
		.close_gift{width: .66rem !important;position: absolute;right: -.18rem;top: -.16rem;}
		.prize_list_li{height: 1.6rem;overflow: hidden;position: relative;}
		.prize_list_left{float: left;margin-left: .22rem;text-align: center;width: 1.79rem;}
		.prize_list_left li:first-child{font-size: .34rem;color: #ff4949;padding-top: .47rem;}
		.prize_list_left li:last-child{font-size: .28rem;color: #666666;}
		.prize_list_content{border-top-left-radius:.2rem;border-top-right-radius:.2rem;background: #fff;height: 6.86rem;overflow-y: scroll;border-radius: .2rem;}
		.prize_list_content1{border-top-left-radius:.2rem;border-top-right-radius:.2rem;background: #fff;height: 5.9rem;overflow-y: scroll;border-radius: .2rem;}
		.prize_list_photos{float: left;margin-left: .3rem;margin-top: .42rem;list-style: none;}
		.prize_list_photos img{width: .62rem;height: .62rem;border-radius: 50%;border:3px solid #fff;margin-left: -.3rem;}
		.eclipse{float: left;font-size: .28rem;color: #666666;padding-top: .78rem;}

		.my_stort{height: 1.14rem;font-size: .3rem;color: #333333;text-align: center;background: #fff;border-bottom-left-radius: .2rem;border-bottom-right-radius: .2rem;box-shadow: 0 -3px 5px rgba(238, 238, 238, 0.4);position: absolute;bottom: -2px;left: 0;width: 100%;}
		.my_stort span{font-size: .3rem;color: #fb597b;}
		.my_stort li{font-size: .3rem;color: #333333;}
		.my_stort li:first-child{padding-top: 0.18rem;}
		.my_stort li a{font-size: .3rem;color: #fb597b;}

        /*新中奖弹窗*/
        .winner_content{width: 100%;position: absolute;z-index: 1000;height: 8.34rem;left: 0;top: 50%;margin-top: -4.17rem;background: url(img/p_63.png) no-repeat;background-size: 100% 100%;}
      	.winner_inner{width: 5.6rem;margin:1.55rem auto 0;position: relative;}
        .winner_img{width:1.54rem;height: 1.54rem;margin:0 auto;padding-top: 1.05rem; }
        .winner_img div{width:1.54rem;height: 1.54rem;display: table-cell;vertical-align: middle;background: #fff;border-radius: .1rem; text-align: center;}
        .winner_img div img{width: 50%; }
        .winner_name{color: #ffffff;font-size: .28rem;text-align: center;background: #fb5c7e;margin:.12rem auto 0;border-radius: .4rem;width: 3.4rem;height: .63rem;line-height: .63rem;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
      	.winner_confirm{width: 2.4rem;display: block;margin:.35rem auto 0;}
      	.winner_content_tip{width: 4.8rem;margin:.36rem auto 0;}
        .winner_content_tip li{font-size: .24rem;color: #999;}
        .winner_tel_tip{width: 4.8rem;margin:.2rem auto 0;}
        .winner_tel_tip li{font-size: .24rem;color: #999;}
        .close_winner{width: .6rem;position: absolute;right:-.47rem;top: -.65rem; }


        /*新中奖弹窗end*/
 		/*新中奖弹窗1*/
        .winner_tel_content{width: 100%;position: absolute;z-index: 1000;height: 9.45rem;left: 0;top: 50%;margin-top: -4.73rem;background: url(img/p_69.png) no-repeat;background-size: 100% 100%;}
		.winner_tel_inner{width: 5.7rem;margin:1.6rem auto 0;position: relative;}
		#telInput{width: 4.8rem;height: .8rem;text-indent: .25rem;border-radius: .1rem;background: #eeeeee;margin:.14rem auto .25rem;display: block;font-size: .3rem;color: #333;}
        #codeInput{width: 2.46rem;height: .8rem;border-radius: .1rem;background: #eeeeee;float: left;font-size: .3rem;text-indent: .25rem;}
        .code_div{width: 4.8rem;overflow: hidden;margin:0 auto;}
        .code_div span{border-radius: .1rem;float: right;width: 2.15rem;height: .8rem;line-height: .8rem;background: #ffc468;color: #fff;font-size: .3rem;text-align: center;}
		.confirm_winner_tel{width: 1.82rem;display: block;margin:.2rem auto 0;}
          /*新中奖弹窗1*/


          /*未中奖弹窗  */
         .lose_content{width: 6.14rem;height: 5rem;position: absolute;z-index: 1000;top: 50%;margin-top: -3.5rem;left: 50%;margin-left:-3.07rem;background: url(img/p_70.png) no-repeat; background-size: 100% 100%;} 
		.confirm_lose{width: 2.38rem;position: absolute;bottom: .6rem;left: .45rem;}
		.look_lose{width: 2.38rem;position: absolute;bottom: .6rem;right: .45rem;}


		.footer{height: 1rem;line-height: 1rem;text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;z-index: 3;border-top:1px solid #e5e5e5;font-size: .34rem;color: #fb597b;font-weight: bold;}
	</style>

</head>
<body>
	<div id="app">
		<!-- 中奖弹窗 -->
	    <!-- <div class="rule_mask" v-if="(cell=='')&&prizeStatus&&resObj.is_winner==1">
	      <div class="rule_model" @click="togglePrize"></div>
	      <div class="prize_content">
	          <div class="prize_title">{{resObj.award}}</div>
	          <div class="tel_input">
	              <span>手机号</span>
	              <input type="number" placeholder="请输入手机号" v-model.trim="tel" />        
	          </div>
	          <div class="tel_input">
	              <span @click="sendMes">{{verification}}</span>
	              <input type="number" placeholder="请输入验证码" v-model.trim="code" />        
	          </div>
	          <button class="sendcontact" type="button" @click="saveTel">发送联系方式</button>
	          <div class="prize_tip">
	             <span>*中奖后10个工作日内，心猜的工作人员会跟您联系，请耐心等待~</span>                 
	          </div>
	          <img src="img/p_28.png" alt="" class="close_prize"  @click="togglePrize">
	      </div>
	    </div> -->
	      <!-- 中奖弹窗end -->
		  <!-- 中奖名单 -->
	    <div class="rule_mask" v-show="!prizeListFlag&&resObj.is_winner==0">
	       <div class="rule_model"  @click="togglePrizeList"></div>
	       <div class="prize_list">
	        <div class="prize_list_title">
	            <img src="img/p_53.png" alt="" class="gift_img">
	            	获奖名单
	            <img src="img/p_52.png" alt="" class="close_gift"  @click="togglePrizeList">
	        </div>
	        <ul :class="resObj.type==0?'prize_list_content':'prize_list_content1'">
	            <li class="prize_list_li borderBottom" v-for="item in prizeList">
	               <ul class="prize_list_left">
	                 <li>{{item.name}}</li>
	                 <li>{{item.position}}</li>
	              </ul>
	              <div class="prize_list_photos">
	                 <img :src="value" alt="" v-for="(value,index) in item.head_urls" v-if="index<=5">
	              </div>
	              <div class="eclipse" v-if="item.head_urls.length>=5">...</div>
	            </li>
	          
	        </ul>
	        <div class="my_stort" v-if="resObj.type==1">
	        	<div v-if="resObj.sub_question_result">
			        <ul v-if="resObj.sub_question_result&&resObj.sub_question_result.wrong_count!=0">
			         	<li>答对<span>{{resObj.sub_question_result.right_count}}</span>题，看看哪些题答错了~</li>
			         	<li><a v-on:click.prevent="goNext">错题回顾</a></li>
			        </ul>
		        </div>
		        <div v-if="resObj.sub_question_result">
		        	<ul v-if="resObj.sub_question_result.wrong_count==0">
			         	<li>全部回答正确！系统会根据每道题回答</li>
			         	<li>时间长短来计算您的得分与排名~</li>
			        </ul>
		        </div>
		        
	        </div>
	        </div>  
	    </div>
		<!-- 中奖名单 -->

		<!-- 中奖弹窗 -->
		<div class="rule_mask" v-if="winnerStatus&&(cell!='')&&resObj.is_winner==1">
			<div class="rule_model" @click="toggleWinner"></div>
			<div class="winner_content">

				<div class="winner_inner">
					<img src="img/p_52.png" alt="" class="close_winner" @click="toggleWinner">
					<div class="winner_img">
					    <div>
					  	  <img :src="img_url" alt="">
					    </div>	
					</div>
					<span class="winner_name">{{prize}}</span>
					<img src="img/p_67.png" alt="" class="winner_confirm" @click="toggleWinner">
					<ul class="winner_content_tip">
						<li>*您已输入过手机号，心猜工作人员会在10个</li>
						<li>工作日内与您联系获取您的收货地址。</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 中奖弹窗 endn -->
		<!-- 中奖弹窗 -->
		<div class="rule_mask" v-if="winnerStatus1&&(cell=='')&&resObj.is_winner==1">
			<div class="rule_model" @click="toggleWinner1"></div>
			<div class="winner_tel_content">
				<div class="winner_tel_inner">
					<img src="img/p_52.png" alt="" class="close_winner" @click="toggleWinner1">
					<div class="winner_img">
					    <div>
					  	  <img :src="img_url" alt="">
					    </div>	
					</div>
					<span class="winner_name">{{prize}}</span>
					<input type="number" placeholder="请输入手机号码" id="telInput" v-model.trim="tel">
					<div class="code_div">
						<input type="number" placeholder="请输入验证码" id="codeInput" v-model.trim="code">
						<span @click="sendMes">{{verification}}</span>
					</div>
					<img src="img/p_68.png" alt="" class="confirm_winner_tel" @click="saveTel">
					<ul class="winner_tel_tip">
						<li>*您已输入过手机号，心猜工作人员会在10个</li>
						<li>工作日内与您联系获取您的收货地址。</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 中奖弹窗 end-->


		<!-- 未中奖弹窗 -->
		<div class="rule_mask" v-if="loseStatus">
			<div class="rule_model" @click="toggleLose"></div>
			<div class="lose_content">
				<img src="img/p_71.png" alt="" class="confirm_lose" @click="toggleLose">
				<img src="img/p_72.png" alt="" class="look_lose" @click="goIndex">
			</div>
		</div>
		<!-- 未中奖弹窗end -->



		<img src="img/p_51.png"  alt="" class="open_prize" v-show="prizeListFlag" @click="togglePrizeList">
		<div class="tuijian_title">推荐阅读</div>
		<ul class="recommend_list">
			<li class="borderBottom" v-for="item in list" @click="goDetail(item.id)">
				<div class="recommend_list_left">
					<div class="recommend_list_title">{{item.title}}</div>
					<div class="recommend_list_tag">
						<img :src="item.ico" alt="">{{item.brief}}
					</div>
				</div>
				<div class="recommend_list_right">
					<img :src="item.img" alt="">
				</div>
			</li>
			<!-- <li class="borderBottom">
				<div class="recommend_list_left">
					<div class="recommend_list_title">2017的双十一，有哪些东西值得购买？</div>
					<div class="recommend_list_tag">
						<img src="img/p_57.png" alt="">天猫双十一
					</div>
				</div>
				<div class="recommend_list_right">
					<img src="img/p_45.png" alt="">
				</div>
			</li>
			<li class="borderBottom">
				<div class="recommend_list_left">
					<div class="recommend_list_title">2017的双十一，有哪些东西值得购买？</div>
					<div class="recommend_list_tag">
						<img src="img/p_57.png" alt="">天猫双十一
					</div>
				</div>
				<div class="recommend_list_right">
					<img src="img/p_45.png" alt="">
				</div>
			</li> -->
		</ul>
		<div class="lookmore" v-if="list.length>10&&isend==0" @click="lookmore">查看更多</div>
        <div class="nomore" v-if="list.length>8&&isend==1">没有更多了~</div>
        <div class="footer" @click="goRaffle">
        	抽奖活动
        </div>
	</div>
	<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                id:GetQueryString("id"),     
                unionid:GetQueryString("unionid"), 
                prizeListFlag:false,
                prizeStatus:false,
                winnerStatus:false,
                winnerStatus1:false,
                loseStatus:false,
                codetimer:null,
                verification:'获取验证码',
                prizeList:[],
                img_url:"",
                prize:"",
                disabled:false,
                list:[],
                resObj:{},
                tel:"",
                cell:"",
                code:"", 
                from:0,
                isend:0,
                type:0
            },
            mounted(){
              hideMenu();
              this.loginWx();

              this.getList(this.from);
              this.getPrize();
              this.getDetail();
              // $(window).scroll(function() {  
              //     var viewH =$(window).height(),//可见高度  
              //     contentH =$(document).height(),//内容高度  
              //     scrollTop =$(window).scrollTop();//滚动高度  
              //     if(contentH - viewH - scrollTop <= 12) { 
                    
              //     }
              // });
              
            },
            methods: {
                togglePrizeList:function(){
                  this.prizeListFlag=!this.prizeListFlag;   
                },
                goNext(){
                   location.href='mistakes.html?id='+this.id+'&unionid='+this.unionid;
                },
                goRaffle(){
                   location.href='raffle.html?id='+this.id+'&unionid='+this.unionid;
                },
                lookmore:function(){
                	var that=this;
                	if(that.isend==0){
                      that.from=that.from+10;
                      that.getList(that.from);  
                    }
                },
                goIndex:function(){
                    history.go(-1);
                },
                togglePrize(){
                   this.prizeStatus=!this.prizeStatus;  
                },
                toggleWinner(){
                   this.winnerStatus=!this.winnerStatus;  
                },
                toggleWinner1(){
                   this.winnerStatus1=!this.winnerStatus1;  
                },
                toggleLose(){
                   this.loseStatus=!this.loseStatus;  
                },
                loginWx(){
			        var that=this;
			        ajaxFun("POST","/login_wx",{
                       unionid:this.unionid
                    },function(data){
                        var res=data;
                        if(res.code==1){
                           
                           if(that.cell){
                           	that.cell=res.data.user_info.cell;
                           	that.winnerStatus=true;
                           }else{
                           	that.winnerStatus1=true;

                           }

                        }else{
                           showLayer(res.message);   
                        }
                                
                    });
	
			    },
			    getWinner:function(){
			    	ajaxFun("POST","/guess/prize_result",{
                       qid:this.id,
                       unionid:this.unionid
                    },function(data){
                        var res=data;
                        if(res.code==1){
                        	that.img_url=res.img_url;
                            that.prize=res.prize;

                        }else{
                           showLayer(res.message);   
                        }
                                
                    }); 

			    },
                saveTel(){
                    var myreg = /^1\d{10}$/;
                    var that=this;
                    if(!myreg.exec(this.tel)){
                        showLayer("请输入正确的手机号");
                        return;
                    }
                    if(this.code==""){
                        showLayer("请输入验证码");
                        return;
                    }
                    ajaxFun("POST","/check_code",{
                       tell: this.tel,
                       code:this.code,
                       unionid:this.unionid
                    },function(data){
                        var res=data;
                        if(res.code==1){
                           showLayer("联系方式发送成功"); 
                           that.toggleWinner1();
                           that.cell=that.tel;


                        }else{
                           showLayer(res.message);   
                        }
                                
                    });
                },
                getDetail:function(){
	                  var that=this;
	                  ajaxFun("POST","/get_question",{
	                     q_id:this.id,
	                     unionid:this.unionid
	                  },function(data){
	                  	var res=data;
	                  	if(res.code==1){
                          that.resObj=res.data.question; 
	                    }else{

	                    }
	                });
	            },
                countDown:function(){
                  var that=this,time=120;
                  if(that.disabled){
                      return;
                  }
                  this.codetimer=setInterval(function(){
                      time--;
                      that.disabled=true; 
                      that.verification="重新发送("+time+")";
                      if(time==0){
                          that.disabled=false;
                          that.verification="获取验证码";
                          time=120;
                          clearInterval(that.codetimer);
                      }
                  }, 1000);
                },
                sendMes:function(){
                    var myreg = /^1\d{10}$/;
                    var that=this;
                    if(!myreg.exec(this.tel)){
                        showLayer("请输入正确的手机号");
                        return;
                    }
                    ajaxFun("POST","/send_sms",{
                       tell: this.tel,
                       unionid:this.unionid
                    },function(data){
                      var res=data;
                      if(res.code==1){
                         showLayer("获取验证码成功"); 
                         that.countDown();
                      }else{
                         showLayer(res.message);    
                      }
                       
                                
                    });
                },
                goDetail(id){
                    window.location.href="articles.html?id="+id+"&unionid="+this.unionid
                },
                getPrize:function(){
                  var that=this;
                  ajaxFun("POST","/get_winner_list",{
                     q_id:this.id,
                     unionid:this.unionid
                  },function(data){
                      var res=data;
                      if(res.code==1){
                        that.prizeList=res.data.list; 

                      }else{

                      }
                              
                  });
                  
                },
                getList:function(from){
                	var that=this;
	                ajaxFun("POST","/get_article_list",{
	                    unionid:this.unionid,
				        q_id:this.id,
				        from:from,
				        length:10
	                },function(data){
                        var res=data;
                        if(res.code==1){
                        	if(res.data.list.length<10){
                              that.isend=1;      
                            }   
                        	for (var i = 0; i < res.data.list.length; i++) {
                        		 that.list.push(res.data.list[i]);
                        	}
                         
                        }else{
                          showLayer(res.message);
                        }
	                              
	                });
                }


            }
        })
    </script>
</body>
</html>